<template>
    <div  id="yoso">
      <!--顶部-->
      <top/>
      <div id="user" v-if="user_top" @mouseover="user_top=true" @mouseleave="user_top=false">
        <div style="width: 100%;height: 80px;text-align: left;">
          <div style="width: 80px;display: inline-block;margin-top: 10px;margin-left: 10px">
            <a href="#/userUpdate"><img :src="user.u_photopath" alt="" width="50px" style="display: inline-block"></a>
          </div>
          <div style="width: 177px;height: 60px;float: right;font-size: 12px;color: #999">
            <div style="margin-top: 12px">
              <span style="background-color: black;color: #8a8e5f;border-radius: 3px;width: 30px;display: inline-block">plus</span><span style="float: right;padding-right: 5px"><a href="javascript:void (0)" @click="exit" style="color: #999">退出</a></span>
            </div>
            <div><span><a href="#" style="color: #999">加入plus会员，一年省10000元</a></span></div>
          </div>
        </div>
      </div>



      <div id="main" class="format">
        <div id="cart_thead" class="clearfix">
          <span id="thead_left" style="font-size: 16px;font-weight: 700 ;color: red">全部商品</span>
          <span id="thead_right" style="color: #a9a4a8;font-size: 12px">配送至:<el-input type="text" style="width: 170px;height: 20px" v-model="addr"></el-input></span>
        </div>
        <div id="cart_bar">
          <div style="width: 133px">  <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></div>
          <div style="width: 208px">商品</div>
          <div style="width: 150px"></div>
          <div style="width: 100px">单价</div>
          <div style="width: 80px">数量</div>
          <div style="width: 140px">小计</div>
          <div style="width: 75px">操作</div>
        </div>
        <div v-for="item in cart">
            <div class="cart format" >
              <ul>
                <li style="width: 40px"><input type="checkbox" @change="handleCheckedChange" name="ck" :value="JSON.stringify(item)"></input>
                </li>
                <li style="width: 80px">
                  <img :src="item.commodity.photoPathList[0]" alt="" width="80px">
                </li>
                <li style="width: 290px;font-size: 12px;text-align: left;padding-left: 10px">
                  <span >{{item.commodityName}}</span>
                  <span style="margin-left: 5px" v-html="item.commodity.details"></span>
                </li>
                <li style="width: 160px;text-align: right">
                  <span >￥{{item.price}}</span>
                </li>
                <li style="width: 100px;text-align: right">
                  <span><input :min="1" type="number" style="width: 50px" v-model="item.count" @change="changCount(item)"/></span>
                </li>
                <li style="width: 100px;text-align: right">
                  <span style="font-weight: bolder">￥{{item.subtotal}}</span>
                </li>
                <li style="width:210px">
                  <a href="javascript:void (0)" @click="del2(item.id)">删除</a>
                </li>
              </ul>
            </div>
        </div>

        <div id="cart_tool" class="format">
          <div id="tool_left">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <a href="javascript:void (0)" @click="del">删除选中的商品</a>
            <a href="#">移入关注</a>
            <a href="#">清理购物车</a>
          </div>
          <div id="tool_right">
            <span>已选{{selectCount}}件商品</span>
            <span>总价{{myAccount}}</span>
            <button @click="pay">结算</button>
          </div>
        </div>
      </div>

<!--猜你喜欢-->
      <div style="margin: 30px 0">
        <div style="font-size: 15px">
          <h1>猜你喜欢</h1>
        </div>
        <div>
          <el-carousel indicator-position="outside">
            <el-carousel-item>
              <img src="../../../static/img/l_head/3.png">
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../../static/img/l_head/4.png">
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../../static/img/l_head/3.png">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
<!--底部-->
      <bottom/>
    </div>
</template>

<script>
  import Top from '../common/Top'
  import Bottom from '../common/Bottom'

    export default {
        name: "Cart",
      components: {
        Top,
        Bottom,
      },
      inject:['reload'],
      data(){
          return{
            login:false,
            checkAll: false,
            checkedCount:0,
            selectCount:0,
            cart:[],
            user:{},
            addr:'',
            key:'',
            user_top:false,
            //总价
            myAccount:0
          }
      },
      methods:{
        handleCheckAllChange(val) {
            document.getElementsByName('ck').forEach(value => {
              value.checked=val
            })
          this.handleCheckedChange()
        },
        handleCheckedChange() {
          this.checkedCount = 0;
          this.myAccount = 0;
          this.selectCount = 0;
          document.getElementsByName('ck').forEach(value => {
            if (value.checked){
              this.checkedCount++;

              const cart = JSON.parse(value.value)
              this.myAccount += cart.subtotal * 1;
              this.selectCount += cart.count * 1;
            }
          });
          this.checkAll =this.checkedCount === this.cart.length;

        },
        changCount(item){
          //商品数量改变后，计算小计，并入库
          item.subtotal = item.count * item.price;
          this.$axios.post('/cart/updateById',item)
            .then(resp=>{
              if(resp.data.result){
                this.handleCheckedChange()
              }else {
                this.$message.error("服务异常")
              }
            })
        },
        del(){
          var cks = [];
          document.getElementsByName('ck').forEach(value => {
            if (value.checked){
              cks.push(value.value);
            }
          });
          var formData = new URLSearchParams();
          formData.append('u_id',this.user.u_id);
          formData.append('cks',cks);
          this.$axios.post('/CartServlet/del',formData)
          this.paging()
          this.reload();
        },
        del2(c_id){
          this.$axios.post('/CartServlet/delById?u_id='+this.user.u_id +'&c_id='+c_id)
            .then(resp=>{
              this.$router.push('/cart/'+this.user.u_id)
            })
          this.paging()
          this.reload();

        },
        pay(){
          var cks = [];
          document.getElementsByName('ck').forEach(value => {
            if (value.checked){
              const cart = JSON.parse(value.value)
              cks.push(cart.id);
            }
          });
          if (cks.length < 1){alert('至少选择一件');return false;}
/*          var formData = new FormData();
          formData.append('username',this.user.username);
          formData.append('cks',cks);
          formData.append('addr',this.addr);*/
          this.$axios.post('/order/addOrder',cks)
            .then(resp=>{
              this.$router.push('/order')
            })
        },

        paging(){
          this.$axios.post('/cart/getCartByUsername?username='+ this.user.username)
            .then(resp=>{
              this.cart = resp.data.data;
            })
        },

      },
      created() {
       this.user= JSON.parse(sessionStorage.getItem('user'));
        this.paging()
      }
    }
</script>

<style scoped>
  .clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix{
    *zoom: 1;
  }
.format{
  width: 990px;
}
#main{
  margin: 0 auto;

}
  #cart_thead{
    padding: 10px 0;
  }
#thead_left {
  float: left;
}
#thead_right{
  float: right;
}
  #cart_bar{
    background-color: #f3f3f3;
    padding: 12px 0;
  }
  #cart_bar div{
    display: inline-block;
    text-align: left;
  }

  #item div{
    display: inline-block;
    text-align: left;
  }
  .cart{
    border: 1px solid #f1f1f1;
    height: 120px;
    margin: 20px 0;
    border-top: 3px solid #aaaaaa;
  }
  .cart ul{
    margin-top: 18px;
  }
  .cart ul li{

    float: left;
  }
  #cart_tool{
    height: 50px;
    border: 1px solid #f1f1f1;
  }
  #tool_left{
    float: left;
    height: 50px;
    width: 360px;
    line-height: 50px;
  }
  #tool_left a{
    margin: 0 5px;
  }
#tool_right{
  text-align: right;
  height: 50px;
  width: 630px;
  float: right;
}
  #tool_right button{
    width: 94px;
    height: 50px;
    background-color: red;
    border: none;
    color: white;
    font-weight: bolder;
  }

</style>


